<template>
    <div style="width: 1200px;background-color: pink;margin: 10px auto">
        <el-card>
            <div style="display: flex;flex-wrap: wrap;justify-content: space-around">
                <el-card v-for="(item,index) in typeList" class="fenlei"
                         style="width: 230px;text-align: center;margin-top: 10px">
                    <el-image
                            style="width: 64px; height: 64px;border-radius: 32px"
                            :src="item.typeImg"
                            :preview-src-list="[item.typeImg]"
                    ></el-image>
                    <h4 style="font-weight: 200;font-size: 18px;cursor: pointer"><a @click="toType(item.id)">{{item.name}}</a></h4>
                    <p style="font-size: 12px;cursor: pointer"><a @click="toType(item.id)">{{item.description}}</a></p>
                    <span style="display: inline-block;margin-top: 15px;font-size: 12px;color: #969696">文章</span>
                </el-card>

            </div>


        </el-card>
    </div>
</template>

<script>
    import Global from "../../public/static/Global";
    // import Global from "../assets/js/Global";
    import CategoryList from "./CategoryList";

    export default {
        name: "Category",
        methods: {
            toType(id) {
                // this.$router({
                //    path:'/categorylist/${id}'
                // })
                this.$router.push({
                    name: 'CategoryList',
                    query: {
                        id: id
                    }
                })
                // this.$route.params.id = id;
                // this.$router.push('/categorylist/' + id + '')
                // console.log(id);
            }
            ,
            async getTypeInfo() {
                const {data: res} = await this.$http.get('type')
                for (let i = 0; i < res.data.length; i++) {
                    res.data[i].typeImg = Global.baseUrl + res.data[i].typeImg;
                    // console.log(res.data[i].createTime);
                }
                this.typeList = res.data;
                // console.log(res);
            }
        },
        data() {
            return {
                typeList: []
            }
        },
        created() {
            this.getTypeInfo();

        }
    }
</script>

<style lang="less" scoped>
    .fenlei {
        /*transition: all 0.5s;*/
        a {
            text-decoration: none;
            color: #303133;
        }
        transition: all 0.5s;
        a:hover {
            color: #40A1FF;
        }
    }
    .fenlei:hover{
        transform: translateY(-20px);
        /*margin: 0 0 20px 0;*/
        box-shadow: 5px 8px 4px 2px #A9A9A9;
    }
</style>